import React, { useEffect, useRef } from 'react';

import L from "leaflet";
import 'leaflet/dist/leaflet.css';


export default function Index() {
  const mapRef = useRef(null);
  const url ='https://t{s}.tianditu.gov.cn/'
  useEffect(() => {
    var zoom = 12;
    // 初始化Leaflet地图
    const map = L.map(mapRef.current, {
      center: [39.984060, 116.457066], // 北京市中心经纬度
      zoomControl: true,
      maxZoom: 20,
      minZoom: 3,
      attributionControl: false
    });
    console.log(map, "00000000")
    //  position: "topleft",
    drawPolygon: false, // 添加绘制多边形
      drawMarker: false, //添加按钮以绘制标记
        drawCircleMarker: false, //添加按钮以绘制圆形标记
          drawPolyline: false, //添加按钮绘制线条
            drawRectangle: true, //添加按钮绘制矩形
              drawCircle: false, //  添加按钮绘制圆圈
                editMode: true, //  添加按钮编辑多边形
                  dragMode: true, //   添加按钮拖动多边形
                    cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
                      removalMode: true, // 清除图层
	});
  // 设置绘制后的线条颜色等
  this.map.pm.setPathOptions({
    color: "orange",
    fillColor: "green",
    fillOpacity: 0.4,
  });
  this.map.pm.setLang("zh"); //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl

  // 监听绘制
  this.getlatLngs()
},
getlatLngs() {
  var that = this
  //pm:drawstart 开始第一个点的时候调用
  //pm:drawend  禁止绘制时调用
  //pm:create  创建完成时调用
  // this.mapObj.on("pm:create", e => {
  //   this.messureLayer.push(e) // 在添加图层时,将其添加在数组
  //   let layer = e.layer
  //   let shape = e.shape


    // 原文链接：https://blog.csdn.net/qq_46302247/article/details/124734031
    // map.centerAndZoom(new L.LngLat(116.40769, 39.89945), zoom);
    // 方法实例图层对象
    // L.tileLayer(
    //   'http://api.tianditu.gov.cn/api?v=4.0&tk=03cd4b8189df52cc8fba3d9fd345f747',
    //   // url + "vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=03cd4b8189df52cc8fba3d9fd345f747",
    //   {
    //     maxZoom: 20,
    //     tileSize: 256,
    //     zoomOffset: 1,
    //   }
    // ).addTo(map);
    // L.tileLayer(
    //   url + "cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=0b018552994f71a9467d24461a8f8238",
    //   {
    //     maxZoom: 20,
    //     tileSize: 256,
    //     zoomOffset: 1,
    //   }
    // ).addTo(map)
    // addTo(map)添加到地图中
    return () => {
      map.remove();
    };
  }, []);

  return <div ref={mapRef} style={{ height: '100%', width: '100%' }} />

}
